<template>
  <div class="step-one">
    <h3 class="requireh3">产品基本信息</h3>
    <m-form ref="form1" :model.sync="mydata" :rules="productRules" label-width="105px" label-position="right">
     <m-form-item prop="goods_info" label="产品信息：">
       <div class="input-wrap">
         <m-input class="all-input" v-model="mydata.goods_info"  placeholder="请输入不超过20字的产品名称" />
       </div>
     </m-form-item>
      <m-form-item prop="goods_type" label="产品类型：">
        <radio-group v-model="mydata.goods_type">
          <m-radio label="1" >包装材料</m-radio>
          <m-radio label="0" >配套服务</m-radio>
        </radio-group>
      </m-form-item>
			<m-form-item required label="产品分类：" v-if="type=='edit'&&!isEdit">
			  <div class="input-wrap" v-if="mydata.class1">
			    <div class="showSelect">{{ mydata.class1.cate_name }}</div>
					 <div class="showSelect">{{ mydata.class2.cate_name }}</div>
					 <div class="editSelectBtn" @click="showEdit">编辑</div>
			  </div>
			</m-form-item>
      <m-form-item required label="产品分类：" v-if="type!='edit' || isEdit">
        <div class="input-wrap">
          <m-form-item prop="goods_class_1" style="margin-right: 15px;">
            <m-select :options="proCategory1" v-model="mydata.goods_class_1"  type="grey" />
          </m-form-item>
          <m-form-item prop="goods_class_2">
            <m-select :options="proCategory2" v-model="mydata.goods_class_2" type="grey" />
          </m-form-item>
        </div>
      </m-form-item>

      <m-form-item required label="产品数量：">
        <div class="input-wrap">
          <m-form-item prop="goods_num" style="margin-right: 15px;">
            <m-input v-model="mydata.goods_num" style="width: 217px;" type="number" />
          </m-form-item>
          <m-form-item prop="goods_unit">
            <m-select :options="productQuantityOptions" v-model="mydata.goods_unit" type="grey" />
          </m-form-item>
        </div>
      </m-form-item>

      <m-form-item required label="期望单价：">
        <div class="input-wrap">
          <m-form-item prop="goods_price" style="margin-right: 15px;">
            <m-input v-model="mydata.goods_price" style="width: 217px;" type="number" />
          </m-form-item>
          <m-form-item prop="currency">
            <m-select :options="unitPriceOptions" v-model="mydata.currency" type="grey" />
          </m-form-item>
        </div>
      </m-form-item>

      <m-form-item prop="goods_condition" label="贸易条件：">
        <div class="input-wrap">
          <m-input type="textarea"
            class="all-input"
            :autosize="{ minRows: 8 }"
            maxlength="500"
            show-word-limit
            v-model="mydata.goods_condition"
            placeholder="请输入您具体的产品需求，有助供应商及时给您提供准确的报价方案"/>
        </div>
      </m-form-item>

      <m-form-item label="产品图片：" style="min-height: 170px;">
        <div class="picList" v-if="type=='edit' && !picEdit">
        	<div class="picItem" v-for="(item,index) in mydata.img_list" :key="index" >
        		<img :src="item" class="objectCover"/>
        	</div>
        </div>
        <div class="editSelectBtn mtp20" @click="showpicEdit" v-if="type=='edit' && !picEdit">更换</div>
        <m-upload @picList="proPicList" :limit="5" action="#" tip="请上传不超过5张、大小在1M以下的图片，限制格式为PNG、JPG" v-if="type=='add' || picEdit">
          <img src="~/assets/images/upload.png" alt="" class="upload-icon">
        </m-upload>
      </m-form-item>
     <m-form-item label="产品附件：" style="min-height: 170px;">
     	<div class="picList" v-if="type=='edit' && !fileEdit">
     		<div class="nameItem" v-for="(item, index) in mydata.file_list" :key="index" >{{ item }}</div>
     	</div>
     	<div class="editSelectBtn mtp20" @click="showfileEdit" v-if="type=='edit' && !fileEdit">更换</div>
       <m-upload @fileList="proFileList" action="#" list-type="text" :limit="1" tip="上传1个产品附件，文件大小限制10M以下，限制格式为PNG、JPG、WORD、PDF、ZIP。" v-if="type=='add' || fileEdit">
         <img src="~/assets/images/add.png" alt="" class="upload-icon">
       </m-upload>
     </m-form-item>
    </m-form>

    <div class="line"></div>
    <h3 class="requireh3">配送与支付</h3>
    <m-form ref="form2" :model.sync="mydata" :rules="transportRules" label-width="105px" label-position="right">
      <m-form-item prop="transport_type" label="运输方式：">
        <m-select :options="transportOptions" v-model="mydata.transport_type" type="grey"/>
      </m-form-item>
      <m-form-item prop="country_type" label="运输地区：">
        <radio-group v-model="mydata.country_type">
          <m-radio label="1" >中国大陆</m-radio>
          <m-radio label="0" >中国港澳台及海外</m-radio>
        </radio-group>
      </m-form-item>
      <m-form-item required label="目的地：" v-if="1">
        <div class="input-wrap">
          <m-form-item>
      			<v-distpicker class="addressChoose" @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea" :province="mydata.province" :city="mydata.city" :area="mydata.area"></v-distpicker>
          </m-form-item>
        </div>
        <div class="input-wrap" style="margin-top: 15px;">
          <m-form-item>
            <m-checkbox v-model="mydata.useDefault">使用我的默认地址</m-checkbox>
          </m-form-item>
        </div>
      </m-form-item>
      <m-form-item required label="目的地：" v-if="0">
        <div class="input-wrap">
          <m-form-item prop="state" style="margin-right: 15px;">
            <m-select :options="destinationOptions2.state" v-model="mydata.state" type="grey" placeholder="其他地区/国家"/>
          </m-form-item>
          <m-form-item prop="city">
            <m-select :options="destinationOptions2.city" v-model="mydata.city" type="grey" placeholder="市"/>
          </m-form-item>
        </div>
        <div class="input-wrap">
          <m-form-item>
            <m-checkbox v-model="mydata.useDefault">使用我的默认地址</m-checkbox>
          </m-form-item>
        </div>
      </m-form-item>
      <m-form-item prop="address" required label="详情地址：">
        <div class="input-wrap">
          <m-input v-model="mydata.address" style="width: 681px; display: inline-block;" placeholder="请输入详细地址"/>
        </div>
      </m-form-item>
      <m-form-item prop="days" required label="期望交期：">
        <div class="input-wrap">
          <m-input v-model="mydata.days" style="width: 217px; display: inline-block; margin-right: 15px;"/>天
        </div>
      </m-form-item>
      <m-form-item required prop="pay_type" label="支付方式：">
        <m-select :options="paymentOptions" v-model="mydata.pay_type" type="grey"/>
      </m-form-item>
      <m-form-item prop="remarks" required label="备注：">
        <div class="input-wrap">
          <m-input type="textarea"
            class="all-input"
            :autosize="{ minRows: 8}"
            maxlength="500"
            show-word-limit
            v-model="mydata.remarks" />
        </div>
      </m-form-item>
    </m-form>
  </div>
</template>

<script>
import { RadioGroup } from 'element-ui'
import { number, price, selectverification } from '@/utils/validates'
import MForm from '@/components/common/m-form/MForm'
import MFormItem from '@/components/common/m-form/MFormItem'
import MInput from '@/components/common/m-input/MInput'
import MRadio from '@/components/common/m-radio/MRadio'
import MSelect from '@/components/common/m-select/MSelect'
import MUpload from '@/components/common/m-upload/MUpload'
import MCheckbox from '@/components/common/m-checkbox/MCheckbox'
import MDatePicker from '@/components/common/m-date-picker/MDatePicker'
import { getProductsCategory} from '@/request/api'

export default {
  name: 'OfficialStepOne', 
	props: {
		type:String,
    mydata:{
      type:Object
    },
  },
  components: { MDatePicker, MCheckbox, MUpload, MSelect, MRadio, MInput, MFormItem, MForm, RadioGroup },
  data() {
    return {
			isEdit:false,
			picEdit:false,
			fileEdit:false,
      productRules: {
        goods_info: [{ required: true, message: '请输入完整', trigger: 'blur'}],
        goods_type: [ { required: true, message: '请输入完整', trigger: 'blur'}],
        goods_class_1: [ { validator: selectverification, required: true, trigger: ['change','blur']}],
        // goods_class_2: [{ required: true, trigger: ['change','blur'], validator: selectverification}],
        goods_num: [ { validator: number, trigger: 'blur',required: true}],
        goods_unit: [ { validator: selectverification, trigger: ['change','blur'],required: true}],
        goods_price: [ { validator: price, trigger: 'blur',required: true}],
        currency: [ { validator: selectverification, trigger: ['change','blur'],required: true}],
        goods_condition: [ { required: true, message: '请输入完整', trigger: 'blur'}]
      },
      transportRules: {
        transport_type: [{ validator: selectverification, trigger: ['change','blur'],required: true}],
        country_type: [{ required: true, message: '请输入完整', trigger: 'blur'}],
        province: [{ validator: selectverification, trigger: ['change','blur'],required: true}],
        city: [{ validator: selectverification, trigger: ['change','blur'],required: true}],
        area: [ { required: true, message: '请输入完整', trigger: 'blur'}],
        address: [{ required: true, message: '请输入完整', trigger: 'blur'}],
        days: [ { validator: number, required: true, trigger: 'blur'}],
        pay_type: [{  validator: selectverification, trigger: ['change','blur'],required: true}],
        remarks: [{ required: true, message: '请输入完整', trigger: 'blur' }]
      },
      proCategory1: [],
      proCategory2: [],
      productQuantityOptions: [
        { label: '个', value: '0' },
        { label: '件', value: '1' },
        { label: 'pcs', value: '2' }
      ],
      unitPriceOptions: [
        { label: '人民币', value: "0" },
        { label: "元", value : "1" }
      ],
      transportOptions: [
        { label: '空运', value: "0" },
        { label: '海运', value: "1" },
        { label: '陆运', value: "2" }
      ],
      destinationOptions2: {
        state: [
          { label: '中国香港', value: 'hk' }
        ],
        city: [
          { label: '香港岛', value: 'hongkongisland' }
        ]
      },
      paymentOptions: [
        { label: '线上支付', value: "0" },
        { label: '线下支付', value: "1" }
      ]
    }
  },
	created(){
		this.getProCategory()
	},
  methods: {
		showEdit(){
			this.isEdit = true
			this.getProCategory()
		},
		showpicEdit(){
			this.picEdit = true
		},
		showfileEdit(){
			this.fileEdit = true
		},
		onChangeProvince(e){
			this.mydata.province = e.value
		},
		onChangeCity(e){
			this.mydata.city = e.value
		},
		onChangeArea(e){
			this.mydata.area = e.value
		},
    proPicList(list){
    	this.mydata.proPic = list
    },
    proFileList(list){
    	this.mydata.proFile = list
    },
		getProCategory(id){
			if(this.type=='edit' && !this.isEdit){
				return false
			}
			let that = this
			id = id || 0
		  let data = {
				is_entity:this.mydata.goods_type,
				page: 1,
				limit: 0,
				pid: id,
				num: 0
			}
		  getProductsCategory(data).then(res => {
				if(id==0) {
					that.proCategory1 = []
					for(var i in res.data.data) {
						let tem = {
							label:res.data.data[i].cate_name,
							value:res.data.data[i].id
						}
						that.proCategory1.push(tem)
					}
				} else {
					that.proCategory2 = []
					for(var i in res.data.data){
						let tem = {
							label:res.data.data[i].cate_name,
							value:res.data.data[i].id
						}
						that.proCategory2.push(tem)
					}
				}
		  }).catch(err => {
        this.$message.error(err.message)
      })
		},
		look() {
		  this.$refs.form1.$refs.mForm.validate(res => {
		    if (res) {
		      this.$refs.form2.$refs.mForm.validate(res2 => {
		        if (res2) {
		          this.$parent.active = 1
							this.$router.push({ path: '/official/2' })
		        }
		      })
		    }
		  })
		},
		findLable(list,val) {
			let obj = {}
			obj = list.find((item)=>{
			  return item.value == val
			})
			return obj.label
		}
  },
	watch:{
		'mydata.goods_class_1': {
				 handler: function(val) {
					 if(this.type=='edit' && !this.isEdit){
					 	return false
					 }else{
						 if(val){
						 	this.mydata.goods_class_1_txt=this.findLable(this.proCategory1,val);
						 }
						  this.mydata.goods_class_2 = ''
						 	this.getProCategory(this.mydata.goods_class_1)
					 }
				 }
		 },
		 'mydata.goods_class_2': {
		 		 handler: function(val) {
					 if(this.type=='edit' && !this.isEdit){
					 	return false
					 }else{
					 	if(val){
					 		 this.mydata.goods_class_2_txt=this.findLable(this.proCategory2,val)
					 	}
					 }
		 		 }
		  },
		 'mydata.goods_type': {
		 		 handler: function() {
					  this.mydata.goods_class_1 = '';
						this.mydata.goods_class_1_txt='';
		 			  this.mydata.goods_class_2 = '';
						this.mydata.goods_class_2_txt='';
		 				this.getProCategory()
		 		 }
		  },
			'mydata.goods_unit': {
				 handler: function(val) {
					 if(val) {
						 this.mydata.goods_unit_txt=this.findLable(this.productQuantityOptions,val)
					 }
				 }
			 },
			 'mydata.transport_type': {
			 	 handler: function(val) {
			 		 if(val){
			 			 this.mydata.transport_type_txt=this.findLable(this.transportOptions,val)
			 		 }
			 	 }
			  }
	}
}
</script>

<style lang="scss" scoped>
	.all-input {
	    width: 745px;
	    display: inline-block;
	}
	/deep/ .dateSelect .el-form-item__content{
		margin-left: 0 !important;
	}
	/deep/.distpicker-address-wrapper select{
		width: 217px;
		height: 45px;
		background-color: #F3F4F6;
		border: solid 1px #eaeaea;
		border-radius: 10px;
		margin-right: 10px;
		position: relative;
	}
.input-wrap {
  width: 900px;
  display: flex;
}


.line {
  height: 1px;
  background: #E9E9E9;
  margin: 10px 0 58px;
}

.bottom {
  margin-bottom: 120px;
}

.bottom60 {
  margin-bottom: 60px;
}

.select-date p {
  margin-bottom: 22px;
}
.showSelect{
	border: 1px solid #DCDFE6;
	width: 200px;
	height: 45px;
	line-height: 45px;
	padding: 0 20px;
	margin-right: 15px;
		background-color: #F3F4F8;
	    border-radius: 10px;
	    border-color: #e9e9e9;
}
.editSelectBtn{
	background: rgb(228, 139, 44);
	    color: rgb(255, 255, 255);
	    border-radius: 10px;
			cursor: pointer;
			font-size: 14px;
			text-align: center;
			width: 90px;
			height: 45px;
			line-height: 45px;
}
.picList{
	display: flex;
	.picItem{
		width: 160px;
		height: 160px;
		margin-right: 10px;
		overflow: hidden;
		border: 1px solid #eee;
		border-radius: 10px;
	}
}
</style>
